<template>
  <div class="box" v-show="open">
    <div class="header" :title="title">
      <p>{{ title }}</p>
      <i class="fa fa-remove" aria-hidden="true" @click="close()"></i>
    </div>
    <slot></slot>
    <!-- <div class="col2">
      <div class="form-item ">
        <label for="t1">登录名:</label> <input type="text" id="t1" />
      </div>
      <div class="form-item">
        <label for="t1">登陆密码:</label> <input type="text" id="t1" />
      </div>
    </div>
    <div class="col2">
    <div class="form-item">
      <label for="t1">中文名:</label> <input type="text" id="t1" />
    </div>
    <div class="form-item">
      <label for="t1">部门名:</label> <input type="text" id="t1" />
    </div>
    </div>
    <div class="col2">
      <div class="form-item">
        <label for="t1">状态:</label><i-switch2></i-switch2>
      </div>
      <div class="form-item">
        <label for="t1">性别:</label>
        <input type="radio" name="sex" value="1" /> 男
        <input type="radio" name="sex" value="0" /> 女
      </div>
    </div>
    <div class="col2">
      <div class="form-item">
        <label for="t1">电话号码:</label> <input type="text" id="t1" />
      </div>
      <div class="form-item">
        <label for="t1">Email:</label> <input type="text" id="t1" />
      </div>
    </div> -->
    <!-- <button @click="saveUser()">保存</button> -->
  </div>
</template>
<script>
import ISwitch2 from "./switch2";
export default {
  components: {
    ISwitch2
  },
  props: {
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    getTableData() {},
    close() {
      this.$emit("close");
    },

    // saveUser() {
    //   this.$emit("saveUser");
    // }
  }
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;

  .header {
    width: 100%;
    height: 4rem;
    line-height: 4rem;
    font-size: 0.875rem;
    border-bottom: 0.1px solid rgb(118, 125, 134);
    margin-bottom: 1.25rem;
    position: relative;
    p {
      padding-left: 20px;
      box-sizing: border-box;
    }
    .fa-remove {
      position: absolute;
      right: 30px;
      top: 23px;
    }
  }
  .form-One{
    display: flex;
    padding-left: 2.25rem;
    height: 2.5rem;
    div{
      margin: 0.3125rem;
    }
  }
  .form-Oneitem {
    display: flex;
    flex: 1;
    margin-bottom: 1.25rem;
    .star{
      position: relative;
      left: -0.625rem;
      top:0.313rem;
      color: red;
      font-size: 1rem;
    }
    .cnameInput {
      width: 71.4375rem;
      height: 2.375rem;
      background: #37404a;
      color: #fff;
      border: 0.1px solid rgb(118, 125, 134);
      border-radius: 5px;
      padding-left: 15px;
      box-sizing: border-box;
    }
    .vue-treeselect {
      width: 71.4375rem;
    }
    input:hover,
    input:focus {
      border: 0.1px solid #4baa4e;
    }
  }
  .form-item {
    // padding: 0 0.3125rem;
    margin-bottom: 20px;
    flex: 1;
    display: flex;
    .userID {
      width: 100%;
      position: relative;
      left: 30px;
    }
    .switchBox {
      position: relative;
      top: 2px;
    }
    .sexBox {
      position: relative;
      top: 4px;
    }
    input[type="radio"] {
      position: relative;
      top: 3px;
    }
    input:hover,
    input:focus {
      border: 0.1px solid #4baa4e;
    }
  }
  label {
      display: inline-block;
      text-align: end;
      width: 5rem;
      height: 2.375rem;
      line-height: 2.375rem;
      margin-right: 0.5rem;
      font-size: 0.75rem;
      position: relative;
    }
    select,
    input[type="text"] {
      width: 26.25rem;
      height: 2.375rem;
      background: #37404a;
      color: #fff;
      padding-left: 15px;
      box-sizing: border-box;
      border: 0.1px solid rgb(118, 125, 134);
      border-radius: 5px;
    }
  button {
    margin-top: 25px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    background-color: #4baa4e;
    height: 1.875rem;
    border-radius: 5px;
    color: #fff;
  }
  .col2 {
    display: flex;
  }
}
</style>